import dayjs from 'dayjs';
import './generate.less';
import { COLOR } from './plan';

const GenerateLine = (props) => {
  const { data } = props;
  return (
    <div
      style={{
        display: 'flex',
        width: '100%',
        borderRadius: 8,
        paddingBottom: 20,
      }}
    >
      {data.map(({ id, label, width, startTime, endTime }, index) => {
        let title = id ? `${id}-${label}` : label;
        let color = id ? COLOR[index % COLOR.length] : '#e49041cb';
        return (
          <>
            <div
              key={`${id}${startTime}`}
              style={{
                position: 'relative',
                width,
                height: 60,
                background: color,
                textAlign: 'center',
              }}
            >
              <div
                style={{
                  lineHeight: '60px',
                  fontWeight: 'bold',
                  overflow: 'hidden',
                  whiteSpace: 'nowrap',
                  textOverflow: 'ellipsis',
                  wordBreak: 'break-all',
                }}
                title
              >
                {title}
              </div>
              {id &&<>
              <span
                style={{
                  position: 'absolute',
                  left: 0,
                  top: '100%',
                  color,
                }}
              >
                {dayjs().startOf('day').second(startTime).format('HH:mm')}
              </span>
            
                <span
                  style={{
                    position: 'absolute',
                    right: 0,
                    top: '100%',
                    color: COLOR[index % COLOR.length],
                  }}
                >
                  {dayjs().startOf('day').second(endTime).format('HH:mm')}
                </span>
              </>
              }
            </div>
          </>
        );
      })}
    </div>
  );
};

export default GenerateLine;
